<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8"></meta>
		<title>layui</title>
		<meta name="renderer" content="webkit"></meta>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
		<link rel="stylesheet" href="layui/css/layui.css" media="all"></link>
	</head>
	<body>
	<style>
	img{
	width:50px;
	lheight:50px;
	}
	</style>
 <script src="layui/layui.js"></script>

		<div class="layui-btn-group demoTable">
	 <div align="center">
			<button class="layui-btn layui-btn-danger" data-type="delChecKs"><i class="layui-icon"></i>批量删除</button>
		
			<button class="layui-btn" data-type="add">添加</button>
		</div>
		</div>
		<table class="layui-table" id="demo" lay-filter="demo"></table>
		<!--添加或编辑用户-->
		<div id="setUser" class="layer_self_wrap" style="width:500px;display:none;">
			<form id="userForm" class="layui-form layui-form-pane" method="post" action="" style="margin-top: 20px;">

				<input id="Id" type="hidden" name="id" />
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline">
						<input id="OrdinaryUserName" name="OrdinaryUserName" lay-verify="required" autocomplete="off" class="layui-input" type="text" />
					</div>
				</div>
			<div class="layui-form-item">
					<label class="layui-form-label">身份证</label>
					<div class="layui-input-inline">
						<input id="IdNumber" name="IdNumber" lay-verify="required" autocomplete="off" class="layui-input" type="text" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-inline">
						<input id="OrdinaryUserPassword" name="OrdinaryUserPassword" lay-verify="required" autocomplete="off" class="layui-input" type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-inline">
						<input id="OrdinaryUserEmail" name="OrdinaryUserEmail" lay-verify="required | email" autocomplete="off" class="layui-input" type="text" />
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">头像</label>
					<div class="layui-input-inline" id="Img">
					 
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline">
						<input id="OrdinaryUserStatus" name="OrdinaryUserStatus" lay-verify="required | school" autocomplete="off" class="layui-input" type="text" />
					</div>
				</div>
				 
 
				<div class="layui-form-item">
					<div class="layui-input-block" style="margin-left: 10px;">
						<button class="layui-btn" lay-submit="" lay-filter="userSubmit">提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<script src="layui/layui.js"></script>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
 <script>
 layui.use('table', function() {
		var table = layui.table,
			form = layui.form;
		//监听表格复选框选择
		table.on('checkbox(demo)', function(obj) {
			console.log(obj)
		});
		 
			tableIns=table.render({
				elem: '#demo',
				url: 'getUserInfo' //数据接口
				,
				page: true //开启分页
					,
				id: 'idTest',
				width: '50%'
					// ,height: 'full-50%'
					,
				cols: [
					[ //表头
						{
							type: 'checkbox',
							fixed: 'left'
						},
						{
							field: 'id',
							title: 'ID',
							width: 80,
							sort: true,
							fixed: true
						}, {
							field: 'ordinaryUserName',
							title: '用户名',
							width: 80
						}, {
							field: 'ordinaryUserEmail',
							title: '邮箱',
							width: 80,
							sort: true
						}, {
							field: 'idNumber',
							title: '身份证',
							width: 80
						}, {
							field: 'ordinaryUserStatus',
							title: '状态',
							width: 177
						}, {
							field: 'idNumber', 
							title: '头像' ,
							width: 177
						}, {
							field: 'right',
							width: 178,
							align: 'center',
							toolbar: '#barDemo'
						}
					]
				],
				done: function(res, curr, count){
    
					
     pageCurr=curr;
 }
			});
		/*}*/

		//监听工具条

		table.on('tool(demo)', function(obj) {

			var data = obj.data;
			if(obj.event === 'detail') {
				layer.msg('ID：' + data.id + ' 的查看操作');

			} else if(obj.event === 'del') {
				layer.confirm('真的删除行么', function(index) {
					$.ajax({
						url: "delUserInfo?Id=" + data.id,
						async: true
					});
					  obj.del();
				      layer.close(index);
				});
			} else if(obj.event === 'edit') { //编辑修改

				layer.alert(JSON.stringify(data));
				getUserAndRoles(obj, data.id)

			}
		});

		var $ = layui.$,
			active = {
				getCheckData: function() { //获取选中数据
					var checkStatus = table.checkStatus('idTest'),
						data = checkStatus.data;
					layer.alert(JSON.stringify(data));

				},
				delChecKs: function() { //获取选中数目
					var checkStatus = table.checkStatus('idTest'),
						data = checkStatus.data;
					//循环删除选中的数据
					layer.confirm('真的删除' + data.length + '个数据', function(index) {
						for(i = 0; i!=data.length; i++) {
							$.ajax({
								url: "delUserInfo?Id=" + data[i].id,
								//async: false
							});
						}
						layer.closeAll();
						tableIns.reload();
					});
					
				},
				isAll: function() { //验证是否全选
					var checkStatus = table.checkStatus('idTest');
					layer.msg(checkStatus.isAll ? '全选' : '未全选')
				},
				add: function() {
					var checkStatus = table.checkStatus('idTest'),
						data = checkStatus.data;
					layer.open({
						type: 2,
						title: '新增用户页面',
						shadeClose: true,
						shade: 0.8,
						area: ['500px', '50%'],
						content: 'add', //iframe的url
						cancel: function() {
							tableIns.reload();
						}

					});

				}
			};

		$('.demoTable .layui-btn').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});

		form.on('submit(userSubmit)', function(data) {
			formSubmit(data);
			return false;
		});
	});

	function getUserAndRoles(obj, id) {
		//回显数据
		$.get("getUserAndRoles", {
			"id": id
		}, function(data) {
			if(data.msg == "ok") {
				$("#Id").val(data.user.id == null ? '' : data.user.id);
				$("#OrdinaryUserName").val(data.user.ordinaryUserName == null ? '' : data.user.ordinaryUserName);
				$("#OrdinaryUserEmail").val(data.user.ordinaryUserEmail == null ? '' : data.user.ordinaryUserEmail);
				$("#OrdinaryUserImg").val(data.files== null ? '' : data.files);
				$("#OrdinaryUserStatus").val(data.user.ordinaryUserStatus == null ? '' : data.user.ordinaryUserStatus);
				$("#IdNumber").val(data.user.idNumber == null ? '' : data.user.idNumber);
				$("#OrdinaryUserPassword").val(data.user.ordinaryUserPassword == null ? '' : data.user.ordinaryUserPassword);
				for(i=0;i!=data.files.length;i++)
		        $("#Img").append("<img src="+data.files[i]+">"+"</img>");
				openUser("修改用户");
			
			} else {
				//弹出错误提示
				layer.alert(data.msg, function() {
					layer.closeAll();
					
				});
			}
		});
	}
	function formSubmit(obj) {
		$.ajax({
			type: "POST",
			data: $("#userForm").serialize(),
			url: "updataUserInfo",
			success: function(data) {
				 
				if( data.data== "ok") {
					layer.alert("操作成功", function() {
						layer.closeAll();
						load(obj);
					});
				} else {
					
				  layer.alert(data);
					
				}
			},
			error: function() {
				layer.alert("操作请求错误，请您稍后再试", function() {
					layer.closeAll();
					//加载load方法
					 load(obj); //自定义
				 
				});
			}
		});
	}
function load(obj){
//重新加载table
tableIns.reload({
where: obj.field
, page: {
 curr: pageCurr //从当前页码开始
}
});
} 
	function openUser(title) {
		layer.open({
			type: 1,
			title: title,
			fixed: false,
			resize: false,
			shadeClose: true,
			area: ['550px'],
			content: $('#setUser')
		});
	}
 </script>
	</body>
</html>